<template>
	<view>
		<scroll-view scroll-y="true" class="main">
			<view class="content">
				<view class="detail">
					<view class="title2" style="margin-top: 20rpx;">永远跟党走</view>
					<view class="read">
						<text>99 阅读</text>
						<text>|</text>
						<text>发布于 2023-9-26</text>
					</view>
					<image src="/static/DangJian1.jpg.jpg" mode=""></image>
					<text class="content">永远跟党走永远跟党走永远跟党走永远跟党走永远跟党走永远跟党走永远跟党走永远跟党走永远跟党走永远跟党走永远跟党走永远跟党走永远跟党走</text>
				</view>
				<u-gap height="20" bg-color="#f7f7f7"></u-gap>
				<view class="comment">
					<view class="title2" style="padding: 20rpx 0;">{{total}} 条评论</view>
					<view class="comment-list">
						<view class="comment-item" v-for="item in commentList">
							<view class="left">
								<u-avatar :src="src" size="80"></u-avatar>
							</view>
							<view class="right">
								<view class="top">
									<text>{{item.userName}}</text>
									<view class="thumb center">
										<u-icon name="thumb-up" size="45"></u-icon>
										<text>{{item.likeNum}}</text>
									</view>
								</view>
								<view class="comment-content line">{{item.content}}</view>
								<view class="date">{{item.commentDate}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bar">
			<input type="text" placeholder="请输入评论内容" @click="show = true">
			<u-icon name="chat" size="50" class="icon"></u-icon>
			<text>4</text>
			<u-icon name="thumb-up" size="45" class="icon"></u-icon>
			<text>99</text>
		</view>
		<u-popup v-model="show" mode="bottom" class="popup">
			<view class="content">
				<textarea placeholder="字数限制150字" v-model="value" auto-height></textarea>
				<button class="bu" style="width: 120rpx;" :disabled="value === '' ? true : false" @click="submit">发表</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recommendList: [],
				src: '',
				commentList: [
					{
						userName: '用户1',
						likeNum: 0,
						commentDate: '2023-9-26',
						content: '共产党万岁'
					},
					{
						userName: '用户2',
						likeNum: 0,
						commentDate: '2023-9-26',
						content: '共产党万岁'
					},
					{
						userName: '用户3',
						likeNum: 0,
						commentDate: '2023-9-26',
						content: '共产党万岁'
					},
					{
						userName: '用户4',
						likeNum: 0,
						commentDate: '2023-9-26',
						content: '共产党万岁'
					},
				],
				total: 4,
				value: '',
				show: false
			};
		},
		onLoad(option) {
			
		},
		methods:{
			submit(){
				this.commentList.unshift({
					userName: '用户5',
					likeNum: 0,
					commentDate: '2023-9-26',
					content: this.value
				})
				this.total++
				this.show = false
				this.value = ''
			}
		}
	}
</script>

<style lang="scss">
view{
	.main{
		height: 1116rpx;
		.content{
			height: fit-content;
			.detail{
				padding: 20rpx;
				.read{
					display: flex;
					flex-direction: row;
					justify-content: start;
					align-items: center;
					margin-top: 40rpx;
					text{
						color: #666;
						font-size: 22rpx;
						margin-left: 20rpx;
						&:first-child{
							margin-left: 0;
						}
					}
				}
				image{
					width: 100%;
					margin: 20rpx auto;
				}
				.content{
					line-height: 1.7;
				}
			}
			.comment{
				padding: 20rpx;
				.comment-list{
					display: flex;
					flex-direction: column;
					.comment-item{
						padding: 20rpx 0;
						border-top: 2rpx solid #e4e7ed;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						.left{
							width: 100rpx;
						}
						.right{
							flex: 1;
							display: flex;
							flex-direction: column;
							.top{
								height: 80rpx;
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								.thumb{
									color: #666;
									text{
										padding: 20rpx;
									}
								}
							}
							.comment-content{
								height: 168rpx;
								-webkit-line-clamp: 4;
							}
							.date{
								color: #666;
								font-size: 26rpx;
							}
						}
					}
				}
			}
		}
	}
	.bar{
		height: 100rpx;
		padding: 20rpx;
		background-color: #f2f3f4;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		input{
			width: 380rpx;
			height: 60rpx;
			background-color: #e4e7ed;
			padding-left: 20rpx;
			border-radius: 10rpx;
		}
		.icon{
			margin-left: 20rpx;
			color: #666;
		}
		text{
			color: #666;
			margin-left: 20rpx;
		}
	}
	.popup{
		.content{
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			textarea{
				padding: 20rpx;
				width: 500rpx;
				min-height: 80rpx;
				background-color: #f2f2f2;
			}
		}
	}
}

</style>
